<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>index</title>
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
<style>
/*底部导航上边框1px优化*/
.aui-nav .aui-bar-tab {
	background-color: #F8F8F8;
	position: relative;
}
.aui-nav .aui-bar-tab:after {
	border-top: 1px solid #c8c7cc;
	display: block;
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	-webkit-transform-origin: 0 0;
	-webkit-transform: scale(1);
	pointer-events: none;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
	.aui-nav .aui-bar-tab:after {
	right: -100%;
	bottom: -100%;
	-webkit-transform: scale(0.5);
	}
}

.notice{
	position: absolute;
	top: 0.2rem;
	left: 50%;
	background-color: red;
	display: none;
}
</style>
</head>
<body>
	<header class="aui-bar aui-bar-nav aui-bar-primary" id="aui-header">
	    <div class="aui-title" id="header-title">综合</div>
	    <a class="aui-pull-right" id="aui-pull-right">
	    	<span class="aui-iconfont aui-icon-search"></span>
	    </a>
	</header>
    <footer class="aui-nav" id="aui-footer">
        <ul class="aui-bar-tab">
            <li class="active-primary" id="tabbar0" tapmode onclick="randomSwitchBtn(this,'综合',0)">
                <span class="aui-iconfont aui-icon-home"></span>
                <p>综合</p>
            </li>
            <li id="tabbar1" tapmode onclick="randomSwitchBtn(this,'问答',1)">
                <span class="aui-iconfont aui-icon-community"></span>
                <p>问答</p>
            </li>
            <li id="tabbar2" tapmode onclick="randomSwitchBtn(this,'动弹',2)">
                <span class="aui-iconfont aui-icon-mark"></span>
                <p>动弹</p>
            </li>
            <li id="tabbar3" tapmode onclick="randomSwitchBtn(this,'我',3)" style="position: relative;">
                <span class="aui-iconfont aui-icon-my"></span>
                <span class="aui-badge aui-badge-danger notice" id="notice">0</span>
                <p>我</p>
            </li>
        </ul>
    </footer>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/zepto.min.js"></script>
<script type="text/javascript" src="./script/OSChinaApi.js" ></script>
<script type="text/javascript" src="./script/common.js" ></script>
<script type="text/javascript">
    apiready = function(){
		api.setStatusBarStyle({
		    style: 'light',
		    color: '#2FA746'
		});
		
    	var user_uid = $api.getStorage('user_uid');
    	if(user_uid == undefined){
    		$api.setStorage('user_uid', 0);
    	}
    	
    	// 初始化内容文本字体大小
    	var contentFontSize = $api.getStorage('contentFontSize');
    	if(contentFontSize == undefined){
    		$api.setStorage('contentFontSize', 2);
    	}
    
        var header = $api.byId('aui-header');
        $api.fixStatusBar(header); 
        var headerPos = $api.offset(header);
        var body_h = api.winHeight;
        var footer_h = $api.offset($api.byId('aui-footer')).h;

        api.openFrameGroup ({
            name: 'footer_tab',
            scrollEnabled:false,
            rect:{
	            x:0,
	            y:headerPos.h,
	            w:'auto',
	            h:body_h - headerPos.h - footer_h
            },
            index:0,
            preload:0,
            frames:
            [{
                name: 'footer_tab_0', 
                url: './html/footer_tab_0.html',
                pageParam: {bodyHeight:body_h, headerHeight:headerPos.h, footerHeight:footer_h},
                bounces:false,
                scrollToTop:false
            },{
                name: 'footer_tab_1', 
                url: './html/footer_tab_1.html', 
                pageParam: {bodyHeight:body_h, headerHeight:headerPos.h, footerHeight:footer_h},
                bounces:false,
                scrollToTop:false
            },{
                name: 'footer_tab_2', 
                url: './html/footer_tab_2.html', 
                pageParam: {bodyHeight:body_h, headerHeight:headerPos.h, footerHeight:footer_h},
                bounces:false,
                scrollToTop:false
            },{
                name: 'footer_tab_3', 
                url: './html/footer_tab_3.html', 
                pageParam: {bodyHeight:body_h, headerHeight:headerPos.h, footerHeight:footer_h},
                bounces:true,
                scrollToTop:false
            }]
        }, function(ret, err){
            var footer = $api.byId('aui-footer');
            var footerAct = $api.dom(footer, '.aui-bar-tab li.active-primary');
            $api.removeCls(footerAct, 'active-primary');
            var name = ret.name;
            var index = ret.index;
            if(index==0){
                $api.text($api.byId('header-title'),'综合');
                $api.addCls($api.byId('tabbar0'), 'active-primary');
                $api.html($api.byId('aui-pull-right'),'<span class="aui-iconfont aui-icon-search" tapmode onclick="openSearch()"></span>');
            }else if(index==1){
                $api.text($api.byId('header-title'),'问答');
                $api.addCls($api.byId('tabbar1'), 'active-primary');
                $api.html($api.byId('aui-pull-right'),'<span class="aui-iconfont aui-icon-post"></span>');
            }else if(index==2){
                $api.text($api.byId('header-title'),'动弹');
                $api.addCls($api.byId('tabbar2'), 'active-primary');
                $api.html($api.byId('aui-pull-right'),'<span class="aui-iconfont aui-icon-add1" tapmode onclick="openTweet()"></span>');
            }else if(index==3){
                $api.text($api.byId('header-title'),'我');
                $api.addCls($api.byId('tabbar3'), 'active-primary');
 			    $api.html($api.byId('aui-pull-right'),'<span class="aui-iconfont aui-icon-settings" tapmode onclick="openSetting()"></span>');
            }
            
            setTimeout("api.parseTapmode()", 100);
        });
		
		// 每10秒检查一下用户是否有新通知
		setInterval("getUserNotice()", 10000);
		
		// 监听通过3DTouch快捷菜单打开页面，仅iOS9+且支持3DTouch的设备可用
		listener3DTouch();
    };
    
    function randomSwitchBtn(obj, name, index) {
        $api.text($api.byId('header-title'),name);
        var footer = $api.byId('aui-footer');
        var footerAct = $api.dom(footer, '.aui-bar-tab li.active-primary');
        $api.removeCls(footerAct, 'active-primary');
        $api.addCls(obj, 'active-primary');
        api.setFrameGroupIndex({
            name: 'footer_tab',
            index: index
        });
        
        for(var i=0; i<3; i++){
	        api.setFrameGroupAttr({
	            name: 'tab_' + i,
	            hidden: true
	        });
        }
        
        api.setFrameGroupAttr({
            name: 'tab_' + index,
            hidden: false
        });

    }
    
    // 设置通知数图标
    function setNoticeIco( notice_count ){
		if( parseInt(notice_count)>0 ){
			$('#notice').text(notice_count);
			$('#notice').show();
		}else{
			$('#notice').text(0);
			$('#notice').hide();
		}
    }
    
    // 获取用户通知数
    function getUserNotice(){
    	var uid = $api.getStorage('user_uid');
    	if( uid<1 ){
    		return false;
    	}
    	var url = OpenAPI.user_notice + '?uid=' + uid;
		api.ajax({
		    url: url,
		    method: 'get',
		    timeout: 30,
		    dataType: 'text',
		    returnAll:false,
		},function(ret,err){
			if( ret ){
				var trans = api.require('trans');
				trans.parse({
				    data:ret
				},function(ret,err){
				    if(ret) {
			    		$api.setStorage('notice_atmeCount', ret.oschina.notice.atmeCount);		// 新@我个数
			    		$api.setStorage('notice_msgCount', ret.oschina.notice.msgCount);		// 新私信个数
			    		$api.setStorage('notice_reviewCount', ret.oschina.notice.reviewCount);	// 新评论个数
			    		$api.setStorage('notice_newFansCount', ret.oschina.notice.newFansCount);// 新评论个数
			    		$api.setStorage('notice_newLikeCount', ret.oschina.notice.newLikeCount);// 新赞的个数
						var notice_count = parseInt(ret.oschina.notice.atmeCount) + parseInt(ret.oschina.notice.msgCount) + parseInt(ret.oschina.notice.reviewCount) + parseInt(ret.oschina.notice.newFansCount) + parseInt(ret.oschina.notice.newLikeCount);
						$api.setStorage('notice_count', notice_count);	// 总的新通知个数
						setAllNoticeIco( notice_count );
				    }else{
				        setAllNoticeIco( 0 );
				        log(err.msg);
				    }
				});

			}else{
				setAllNoticeIco( 0 );
		        log('错误码：'+err.code+'；错误信息：'+err.msg+'网络状态码：'+err.statusCode);
			}
		});
    }
    
    // 打开设置页
    function openSetting(){
		api.openWin({
		    name: 'setting_win',
		    url: './html/setting_win.html',
		});
    }
    
    // 打开搜索页
    function openSearch(){
		api.openWin({
		    name: 'search_win',
		    url: './html/search_win.html',
		});
    }
    
    // 打开动弹发布页
    function openTweet(){
		if( isLogin()==false ){
			api.toast({
			    msg: '请先登录',
			    duration:2000,
			    location: 'middle'
			});
			return false;
		}
    
		api.openWin({
		    name: 'tweet_pub_win',
		    animation: {
		    	 type:"movein",
		    	 subType:"from_bottom",
		    },
		    url: './html/tweet_pub_win.html',
		});
    }
    
    // 3DTouch
    function listener3DTouch(){
		var obj = api.require('3DTouch');
		obj.setListener(
		    function(ret,err){
		        var type = ret.type;
		        if (type == 'com.mycompany.myapp.search'){
					openSearch();
		        }else if(type == 'com.mycompany.myapp.pubtweet'){
		        	openTweet();
		        }
		    }
		);
    }
    
</script>
</html>